<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <link rel="stylesheet" href="./更多天气.css">
        <!-- 引入ECharts图表库（用于绘制7天温度变化图） -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div class="box">
    
        <video src="../wearther/video/a0.mp4" autoplay loop></video>
        
      
        <div class="header">
            <div class="header-left">
                <p>全国天气预报</p>
            </div>
            <div class="header-middle">
                <div class="header-middle-nav-1 header-little">
                    <a href="">首页</a>
                </div>
                <div class="header-middle-nav-1">
                    <a href="./天气预报.html">今日天气</a>
                </div>
                <div class="header-middle-nav-1 header-active">
                    <a href="">七日天气</a>
                </div>
            
                <div class="header-middle-nav-1">
                    <!-- 点击弹出温度图表模态框 -->
                    <a href="javascript:void(0)" id="moreWeatherBtn">更多天气</a>
                </div>
                <div class="header-middle-nav-1">
                    <a href="">新闻资讯</a>
                </div>
                <div class="header-middle-nav-1">
                    <a href="">联系我们</a>
                </div>
            </div>
            <div class="header-right">
                <div class="header-right-2">
                    <input type="text" placeholder="请输入地区" id="searchInput" value="青岛">
                    <button class="searchBtn">切换</button><!-- 点击触发城市切换 -->
                </div>
            </div>
        </div>
        
    <!-- 天气卡片容器：动态生成7天天气卡片的核心区域 -->
        <div class="weather-container">
            <div class="weather-cards"></div><!-- JS动态插入天气卡片 -->
        </div>
        <!-- 温度图表模态框：点击“更多天气”弹出，显示ECharts温度图 -->
        <div class="weather-modal" id="weatherModal">
            <div class="modal-content">
                <!-- 关闭模态框按钮 -->
                <span class="close-btn" id="closeModal">&times;</span>
                <h3>7天温度变化图</h3>
              
                <div id="temperatureChart" style="width: 600px; height: 400px;"></div>
            </div>
        </div>
        
        <div class="footer">
            Design by:
            <a href="http://www.lixianliang.top/">bysame</a>
            &nbsp;&nbsp;&nbsp;
            <a href="http://www.beian.miit.gov.cn/">江淮川所属</a>
            版权所有，违者必究 &nbsp;&nbsp;&nbsp;数据来源：
            <a href="https://www.heweather.com/">和风天气</a>
        </div>
    </div>
<!-- 引入页面交互逻辑：天气数据拉取、卡片生成、图表渲染等 -->
    <script src="./更多天气.js"></script>
</body>
</html>